<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
<script src="/CHENG-ZAO-ZAO/js/vue.js"></script>
</head>
<body>
     <div id="app">
        <p>First name: <input type="text" v-model="firstName"></p>
        <p>Last name: <input type="text" v-model="lastName"></p>
        <p>fullname:{{fullname}}</p>
        <button @click="change">改变fullname</button>
     </div>
<br>
   <script>
       let app = new Vue({
        el:"#app",
        data:{
             firstName:'',
             lastName:''
        },
        methods:{
            change(){
                this.fullname='Harry Potter';
            }
        },
        computed:{
            fullname:{
                get:function(){
                    return this.firstName +''+this.lastName;
                },
                set:function(newVal){
                    var arr =newVal.split('');
                    this.firstName=arr[0];
                    this.lastName=arr[1];
                }


            }
        }
       })
    </script>
</body>
</html>